<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
    <link rel="stylesheet" href="./main.css">
</head>

<body style="background-color: var(--sapBackgroundColor)">
    <!-- playground-fold-end -->

    <ui5-card>
        <ui5-card-header slot="header" title-text="This header is interactive"
            subtitle-text="Click, press Enter or Space" additional-text="3 of 6" interactive>
            <ui5-icon name="group" slot="avatar"></ui5-icon>
        </ui5-card-header>
        <ui5-list separators="None" style="margin-block-end: 0.75rem;">
            <ui5-li description="Software Architect">Richard Wilson
                <ui5-avatar slot="image" shape="Square">
                    <img src="../assets/images/avatars/man_avatar_2.png" alt="Woman image">
                </ui5-avatar>
            </ui5-li>
            <ui5-li description="Visual Designer">Elena Petrova
                <ui5-avatar slot="image" shape="Square">
                    <img src="../assets/images/avatars/woman_avatar_3.png" alt="Woman image">
                </ui5-avatar>
            </ui5-li>
            <ui5-li description="Quality Specialist">John Miller
                <ui5-avatar slot="image" shape="Square">
                    <img src="../assets/images/avatars/man_avatar_3.png" alt="Woman image">
                </ui5-avatar>
            </ui5-li>
        </ui5-list>
    </ui5-card>
    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
